<template>
<div id="">
  <div class="movieBox">
    <mt-loadmore ref="loadmore" :bottom-method="loadButton" :top-status.sync="topStatus">
      <div class="media" v-for="item in movieList">
        <div class="media-left media-middle">
          <img class="media-object" :src="item.images.small" alt="...">
        </div>
        <div class="media-body">
          <h4 class="media-heading">{{item.title}}</h4>
        </div>
      </div>
      <div slot="top" class="mint-loadmore-top">
        <span v-show="topStatus !== 'loading'" :class="{'rotate':topStatus==='drop'}">↓</span>
        <span v-show="topStatus === 'loading'">loading...</span>
      </div>
    </mt-loadmore>
  </div>
</div>
</template>
<script>
import {Loadmore} from 'mint-ui'
import {Toast} from 'mint-ui'
export default {
  data() {
    return {
      topStatus: "",
      movieList: []
    }
  },
  methods: {
    loadButton() {
      let start = this.movieList.length
      this.axios({
        url: "/api/v2/movie/in_theaters?count=10&start=" + start,
        method: "get"
      }).then((res) => {
        let temp = res.data.subjects
        if (temp.length == 0) {
            Toast("木有了..")
            this.allLoaded = true
            this.$refs.loadmore.onBottomLoaded()
            return
        }
        this.movieList = this.movieList.concat(temp)
        this.allLoaded = true
        this.$refs.loadmore.onBottomLoaded()
      })
    }
  },
  mounted() {
    this.axios({
      url: "/api/v2/movie/in_theaters?count=10",
      method: "get"
    }).then((res) => {
      this.movieList = res.data.subjects
    })
  }
}
</script>
<style scoped>

</style>
